<template>
  <div>
    <el-card v-loading="loading">
      <el-button type="primary" icon="el-icon-plus" @click="add">添加实验类型</el-button>
      <br><br>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark">
        <el-table-column type="index" width="68" align="center">
          </el-table-column>
        <el-table-column prop="name" label="实验类型">
        </el-table-column>
        <el-table-column prop="des" label="描述">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.$index)">编辑</el-button>
            <el-button type="text" @click="del(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部翻页器 -->
      <div v-if="page.total > page.pageSize" class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :pager-count="5"
          :total="page.total"
          :page-size="page.pageSize"
          :current-page="page.current"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 点击删除的弹出框 -->
    <el-dialog
      :title="dialog.del.title"
      :visible.sync="dialog.del.show"
      width="400px"
      center
    >
      <span>确定删除{{dialog.del.content}}吗？</span>
      <span slot="footer">
        <el-button @click="dialog.del.show = false">取 消</el-button>
        <el-button type="primary" @click="delSure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击添加、编辑出现的弹框 -->
    <el-dialog
      :title="dialog.isEdit?'编辑':'添加'"
      :visible.sync="dialog.show"
      @close="handleDialogClose(`formData`)"
      width="700px"
      center
    >
      <el-form ref="formData" :rules="ruleForm" :model="formData" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input placeholder="请输入实验类型名称" v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="des">
          <el-input placeholder="请输入实验类型描述" v-model="formData.des"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialog.show = false">取 消</el-button>
          <el-button type="primary" @click="dialogSure('formData')">{{ dialog.isEdit ? "保 存" : "添 加" }}</el-button>
          <el-button @click="resetForm('formData')">重 置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      page: {
        total: 10,
        pageSize: 10,
        current: 1
      },
      dialog: { // 弹框相关
        isEdit: false,
        show: false,
        editIndex: '',
        del: {
          title: '删除',
          show: false,
          content: '',
          index: ''
        }
      },
      ruleForm: { // 表单验证规则
        name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        des: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      formData: {} // 表单中的数据
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      request.get('/labs/experitype/page', { params: {
        status: 1,
        ...this.page
      }}).then(res => {
        this.tableData = res.content.records
        this.page.total = res.content.total
        this.loading = false
      })
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.getList()
    },
    add() { // 点击添加按钮
      this.dialog.show = true
      this.dialog.isEdit = false
    },
    edit(index) {
      request.get(`/labs/experitype/${this.tableData[index].id}`).then(res => {
        if (!res.code) {
          this.dialog.isEdit = true
          this.dialog.show = true
          const { name, des } = res.content
          this.formData = { name, des }
          this.dialog.editIndex = index
        }
      })
    },
    dialogSure(formname) {
      this.$refs[formname].validate(valid => {
        if (valid) {
          if (!this.dialog.isEdit) { // 添加
            request.post('/labs/experitype', {
              ...this.formData
            }).then(res => {
              if (!res.code) {
                this.getList()
                this.dialog.show = false
                this.$message.success('添加成功')
              }
            })
          } else { // 修改更新
            request.put('/labs/experitype', {
              ...this.formData,
              id: this.tableData[this.dialog.editIndex].id
            }).then(res => {
              if (!res.code) {
                this.$set(this.tableData, this.dialog.editIndex, { id: this.tableData[this.dialog.editIndex].id, ...this.formData })
                this.dialog.show = false
                this.$message.success('编辑成功')
              }
            })
          }
        }
      })
    },
    del(index) {
      this.dialog.del.show = true
      this.dialog.del.content = this.tableData[index].name
      this.dialog.del.index = index
    },
    delSure() {
      request.delete(`/labs/experitype/${this.tableData[this.dialog.del.index].id}`).then(res => {
        if (!res.code) {
          this.getList()
          this.$message.success('删除成功')
        }
        this.dialog.del.show = false
      })
    },
    resetForm(formname) {
      this.$refs[formname].resetFields()
    },
    handleDialogClose(formname) {
      this.resetForm(formname)
    }
  }
}
</script>

<style scoped>
.pagination {
  float: right;
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>
